<template>
  <div>
<!--    <el-form :inline="true">-->
<!--      <el-form-item>-->
<!--        <el-button type="primary"-->
<!--                   icon="el-icon-plus" @click="handleAdd">-->
<!--          添加-->
<!--        </el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        width="50"
        label="id">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="success"
            @click="update(row)">编辑</el-button>

          <el-button
            size="mini"
            type="danger"
            @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog width="70%"
               style="z-index: 1"
               :modal="false"
               @close="dialogClose"
               :visible.sync="dialogFormVisible">
      <el-form label-width="88px" :model="form" ref="form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <tinymce-component v-model="form.content" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getCompany,updateCompany } from "@/api/config";
import { deepClone } from "@/utils";
import tinymceComponent from "@/components/tinymce"

export default {
  name: "index",
  components:{
    tinymceComponent
  },
  data() {
    return {
      tableData:[],
      form:{
        "location": 1,
        "title": "",
        "content": "",
        "isShow": 1
      },
      isbianji:false,
      dialogFormVisible:false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      getCompany().then(res=>{
        console.log(res.data)
        this.tableData = res.data
      })
    },
    del(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message.success('操作成功')
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    update(row){
      this.isbianji = true
      this.form = deepClone(row)
      this.dialogFormVisible = true
    },
    async submit(){
      if (this.isbianji){
        const res = await updateCompany(this.form)
        console.log(res)
      }else {

      }
      this.dialogFormVisible = false
      this.$message.success('操作成功')
      this.getList()

    },
    dialogClose(){
      this.$refs.form.resetFields()
      this.form = {
        "location": 1,
        "title": "",
        "content": "",
        "isShow": 1
      }
    },
    handleAdd(){
      this.isbianji = false
      this.dialogFormVisible = true
    },
    views({id}){
      this.$router.push(`/kc/kcf?id=${id}&view=${true}`)
    }
  }
}
</script>

<style scoped>
>>>.el-dialog__wrapper{
  z-index: 999 !important;
}
</style>
